<!-- 表单设计 -->
<template>
  <div class="formDesign">
    <FlowHeader @submitHandle="submitHandle" @routHandle="routHandle" />
    <component
      :is="templateName"
      :initData="{
        baseFormData: { ...baseFormData },
        formData: { ...formData }
      }"
    ></component>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, onMounted } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import { useRoute } from 'vue-router'
import FlowHeader from './components/FlowHeader.vue'
import FlowForm from './components/FlowForm.vue'
import BaseForm from './components/BaseForm.vue'
import { useFormData } from '@/store'
import { formDataes } from '@/api/form'

const store = useFormData()
// tab切换
const templateName = shallowRef(BaseForm)
const routHandle = (tg) => {
  templateName.value = tg === 'base' ? BaseForm : FlowForm // base 基础表单   from 表单设计
}
const route = useRoute()

onMounted(() => {
  if (route.query.id) {
    getInfo()
  }
})
// 获取数据详情
const baseFormData = ref()
const formData = ref()
const getInfo = async () => {
  const id = route.query.id
  const params = {
    id: 'GET_MY_FORM',
    messageAuth: {
      tenant: 'tenant_hiss',
      currentUser: {
        userId: '1',
        userName: '张三',
        userGroups: ''
      }
    },
    palyload: {
      ids: id,
      query: ''
    }
  }
  await formDataes(params).then((res) => {
    const resData = res.data.res
    const context = JSON.parse(resData[0].context)
    baseFormData.value = context.baseFormData
    formData.value = context.formData
  })
}
// 数据提交
const submitHandle = async (tg?: string) => {
  const params = {
    id: 'CREATE_FORM_DIFINITION',
    messageAuth: {
      tenant: 'tenant_hiss',
      currentUser: {
        userId: '1',
        userName: '张三',
        userGroups: ''
      }
    },
    palyload: {
      userAppId: route.query.appId ? route.query.appId : undefined,
      formDetail: {
        baseFormData: store.getBaseFormData,
        formData: [
          {
            page: 1,
            type: 1,
            data: store.formData
          }
        ]
      }
    }
  }
  if (route.query.appId) {
    ;(params.palyload as any).appId = route.query.appId
  }
  // 编辑的时候把id给后端
  if (route.query.id) {
    ;(params.palyload as any).id = route.query.id
  }

  console.log('输出数据：', tg, params, store.formData)
  // 表单预览
  store.setSubmitFormData(params)
  // 数据提交
  if (tg !== 'pre') {
    // 简单针对 表单基础信息进行效验
    const baseFormData: any = params.palyload.formDetail.baseFormData
    if (Object.keys(baseFormData).length === 0) {
      MessagePlugin.error('请输入表单的基础信息！')
      return
    }
    if (Object.keys(baseFormData).length > 0 && baseFormData.formTitle === '') {
      MessagePlugin.error('请输入表单名称！')
      return
    }
    if (Object.keys(baseFormData).length > 0 && baseFormData.fromType === '') {
      MessagePlugin.error('请输入表单分组！')
      return
    }
    // 请求接口
    await formDataes(params).then((res) => {
      if (res.code === 200) {
        store.setBaseFormData({})
        store.setSubmitFormData({})
        store.setFormData({})
        MessagePlugin.success('数据保存成功！！')
      } else {
        const msg =
          res.message || res.errorMessage || '请求出错了，请联系管理员'
        MessagePlugin.success(msg)
      }
    })
  }
}
</script>
<style src="./index.less" scoped></style>
